var prefix = "/jzweb/eventresourceAllocation";
var arrList=[]
$(document).ready(function () {
    getIdList()
    // hanldeGetVedioList()
    load();
    // 初始化Bootstrap Tooltip
    // 在这里初始化Tooltip
    $('[data-toggle="tooltip"]').tooltip({
        trigger: 'hover',
        placement: 'top'
    });

    // ...此处放置你的Bootstrap Table初始化代码...
});
$(function () {
    load();
});
function hanldeGetVedioList(){
    $.ajax({
        url: "/jzweb/eventresourceAllocations/mp4Url",
        type: "get",
        success: function (r) {
            console.log(r)
            let dataList=r.data
            const videoContainer = document.getElementById('videoContainer');
            // const durations = [];
            dataList.forEach((item, index) => {
                const videoUrl = item.mp4url;

                // 创建隐藏的 <video> 元素
                const videoElement = document.createElement('video');
                videoElement.style.display = 'none';

                videoElement.src = videoUrl;
                videoContainer.appendChild(videoElement);

                // 监听 loadedmetadata 事件
                videoElement.addEventListener('loadedmetadata', function() {
                    console.log(`视频 ${index} 总时长: ` + videoElement.duration);
                    item.duration=parseInt(videoElement.duration)
                    arrList.push(item);
                    console.log(arrList);
                });

                // 加载视频资源以触发 loadedmetadata 事件
                videoElement.load();
            });
        }
    });
}

function handleSubmitVedio(){
    $.ajax({
        url: "/jzweb/eventresourceAllocations/updateDuration",
        type: "POST",
        contentType:'application/json',
        data:JSON.stringify({
            allocationsDOList:arrList
        }),
        success: function (r) {
            console.log(r,'提交成功')
        }
    });
}

function load() {
    $('#exampleTable')
        .bootstrapTable(
            {
                method: 'get', // 服务器数据的请求方式 get or post
                url: prefix + "/list", // 服务器数据的加载地址
                //	showRefresh : true,
                //	showToggle : true,
                //	showColumns : true,
                iconSize: 'outline',
                toolbar: '#exampleToolbar',
                striped: true, // 设置为true会有隔行变色效果
                dataType: "json", // 服务器返回的数据类型
                pagination: true, // 设置为true会在底部显示分页条
                singleSelect: false, // 设置为true将禁止多选
                // contentType : "application/x-www-form-urlencoded",
                // //发送到服务器的数据编码类型
                pageSize: 10, // 如果设置了分页，每页数据条数
                pageNumber: 1, // 如果设置了分布，首页页码
                //search : true, // 是否显示搜索框
                showColumns: false, // 是否显示内容下拉框（选择显示的列）
                sidePagination: "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"
                queryParamsType: "",
                // //设置为limit则会发送符合RESTFull格式的参数
                queryParams: function (params) {
                    return {
                        //说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                        pageNumber: params.pageNumber,
                        pageSize: params.pageSize,
                        jzEveMoId: $('#jzEveMoId').val(),
                        eventName: $('#searchName').val(),
                        // eventType: $('#searchState').val()
                        // name:$('#searchName').val(),
                        // username:$('#searchName').val()
                    };
                },
                // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                // queryParamsType = 'limit' ,返回参数必须包含
                // limit, offset, search, sort, order 否则, 需要包含:
                // pageSize, pageNumber, searchText, sortName,
                // sortOrder.
                // 返回false将会终止请求
                responseHandler: function (res) {
                    console.log(res);
                    return {
                        "total": res.data.total,//总数
                        "rows": res.data.records   //数据
                    };
                },
                columns: [
                    {
                        checkbox: true
                    },
                    // {
                    //     field: 'id',
                    //     title: '序号'
                    // },
                    {
                        field: 'eventName',
                        title: '赛项名称',
                        width: 280,
                        formatter: function (value, row) {
                            // 这里假设row里有一个属性叫'details'，我们将用它作为Tooltip的内容
                            var tooltipContent = row.eventName; // 如果details不存在，则默认为空字符串

                            // 将内容包裹在带有data-toggle和title属性的元素中，以激活Tooltip
                            return `<span class="cell-wrap-text" data-toggle="tooltip" title="${tooltipContent}">${value}</span>`;
                        },
                    },


                    {
                        field: 'jzEveMoId',
                        title: '赛项模版名称',
                        width: 100,
                    },
                    {
                        field: 'year',
                        title: '所属年份',
                        width: 80
                    },
                    {
                        field: 'eventTitle',
                        title: '所属赛项',
                        width: 150,
                        formatter: function (value, row) {
                            // 这里假设row里有一个属性叫'details'，我们将用它作为Tooltip的内容
                            var tooltipContent = row.eventTitle; // 如果details不存在，则默认为空字符串

                            // 将内容包裹在带有data-toggle和title属性的元素中，以激活Tooltip

                            return `<span data-toggle="tooltip" title="${tooltipContent}">${value}</span>`;
                        },
                    },

                    {
                        field: 'eventType',
                        //赛项类型0 国赛1 省赛 2市赛 3其他赛
                        title: '赛项类型',
                        width: 90,
                        formatter: function (value, row, index) {
                            if (value == 0) {
                                return '<span class="label label-primary">国赛</span>';
                            } else if (value == 1) {
                                return '<span class="label label-default">省赛</span>';
                            } else if (value == 2) {
                                return '<span class="label label-primary">市赛</span>';
                            } else if (value == 3) {
                                return '<span class="label label-info">其他赛</span>';
                            }
                        }
                    },
                    {
                        field: 'img',
                        title: '封面图',
                        visible: true,
                        formatter: function (value, row) {
                            // console.log(value, row, value.indexOf('.mp4'))
                            if (value) {
                                return '<span onclick="imgYulan(\''
                                    + row.img
                                    + '\')">点击查看</span>';
                            }
                        },
                        width: 100,
                    },
                    {
                        field: 'createBy',
                        title: '创建人',
                        width: '100',
                        formatter: function (value, row) {
                            // 这里假设row里有一个属性叫'details'，我们将用它作为Tooltip的内容
                            var tooltipContent = row.createBy; // 如果details不存在，则默认为空字符串

                            // 将内容包裹在带有data-toggle和title属性的元素中，以激活Tooltip
                            return `<span data-toggle="tooltip" title="${tooltipContent}">${value}</span>`;
                        }
                    },
                    {
                        field: 'createTime',
                        title: '创建时间',
                        width: '150',
                    },
                    {
                        field: 'updateTime',
                        title: '修改时间',
                        width: '150',
                    },
                    {
                        field: 'numStus',
                        title: '学习人数',
                        width: 80,
                    },
                    {
                        title: '操作',
                        field: 'id',
                        align: 'center',
                        formatter: function (value, row, index) {
                            var e = '<a class="btn btn-primary btn-sm ' + s_edit_h + '" href="#" mce_href="#" title="编辑" onclick="edit(\''
                                + row.id
                                + '\')"><i class="fa fa-edit"></i></a>';
                            var d = '<a class="btn btn-warning btn-sm ' + s_remove_h + '" href="#" title="删除"  mce_href="#" onclick="remove(\''
                                + row.id
                                + '\')"><i class="fa fa-remove"></i></a>';
                            var f = '<a class="btn btn-success btn-sm" href="#" title="备用"  mce_href="#" onclick="resetPwd(\''
                                + row.id
                                + '\')"><i class="fa fa-key"></i></a>';
                            // var addChaptersButton = '<a class="btn btn-primary btn-sm" href="#" title="添加下一级章节"  mce_href="#" onclick="eventresources(\''
                            //     + row.id
                            //     + '\')"><i class="fa fa-plus"></i>配置属性</a>';

                            var addChaptersButton = '<a data-list="' + encodeURIComponent(JSON.stringify(row)) + '" data-id="' + row.id + '" class="btn btn-primary btn-sm config-property-btn" href="#" title="添加下一级章节"><i class="fa fa-plus"></i>配置属性</a>';
                            // return row.jzEveMoId == '行业资源' ? e + d : e + d + addChaptersButton;
                            return e + d + addChaptersButton;
                        }
                    }]
            });
}

function reLoad() {
    $('#exampleTable').bootstrapTable('refresh');
}

function getIdList() {
    $.ajax({
        url: "/jzweb/eventresourceAllocation/getModelIds",
        type: "get",
        success: function (r) {
            if (r.data.length == 0) {
                $("#jzEveMoId").append('<option value="">暂无数据</option>');
            } else {
                $("#jzEveMoId").append('<option value="">请选择</option>');
                for (let key in r.data) {
                    var a = r.data[key]
                    $("#jzEveMoId").append("<option value='" + key + "'>" + a + "</option>");
                }
                // for (var i=0;i<r.data.length; i++) {
                //     var a= r.data[i]
                //     $("#jzEveMoId").append("<option value='"+r.data[i]+"'>"+a+"</option>");
                // }
            }
        }
    });
}

function editVedio() {
    var rows = $('#exampleTable').bootstrapTable('getSelections'); // 返回所有选择的行，当没有选择的记录时，返回一个空数组
    if (rows.length == 0) {
        layer.msg("请选择要修改的数据");
        return;
    }
    layer.confirm("确认要修改选中的'" + rows.length + "'条数据吗?", {
        btn: ['确定', '取消']
        // 按钮
    }, function () {
        var ids = new Array();
        // 遍历所有选择的行数据，取每条数据对应的ID
        $.each(rows, function (i, row) {
            ids[i] = row['id'];
        });
        $.ajax({
            type: 'POST',
            data: {
                allocationIds: ids,
                second: $('#fmpic').val() * 1000
            },
            url: '/jzweb/eventresourceAllocation/setImgUrl',
            success: function (r) {
                if (r.code == 0) {
                    layer.msg(r.msg);
                    reLoad();
                } else {
                    layer.msg(r.msg);
                }
            }
        });
    }, function () {

    });
}

function imgYulan(img) {
    layer.photos({
        photos: {
            'anim': 6,
            "title": "Photos Demo",
            "start": 0,
            "data": [
                {
                    "alt": "layer",
                    "pid": 1,
                    "src": img,
                },
            ]
        }
    });
}

$(document).on('click', '.config-property-btn', function (e) {
    e.preventDefault(); // 阻止默认行为
    var id = $(this).data('id'); // 获取data-id
    var rowDataStr = $(this).data('list'); // 获取data-list
    var rowData = JSON.parse(decodeURIComponent(rowDataStr)); // 解码并解析JSON字符串

    // 现在你可以使用rowData对象了
    eventresources(id, rowData);
});


function handleGoUrl(url) {
    console.log(url)
}

function eventresources(id, rowData) {
    console.log(rowData)
    sessionStorage.setItem('jzEveMoId', rowData.jzEveMoId)
    sessionStorage.setItem('zallocationId', id)
    var index = layer.open({
        type: 2,
        title: rowData.eventName,
        maxmin: true,
        shadeClose: false, // 点击遮罩关闭层
        area: ['1000px', '720px'],
        content: '/jzweb/eventresourceAllocations?parentId=' + id// iframe的url
    });
    layer.full(index);
}

function add() {
    layer.open({
        type: 2,
        title: '增加',
        maxmin: true,
        shadeClose: false, // 点击遮罩关闭层
        area: ['800px', '520px'],
        content: prefix + '/add' // iframe的url
    });
}

function edit(id) {
    layer.open({
        type: 2,
        title: '编辑',
        maxmin: true,
        shadeClose: false, // 点击遮罩关闭层
        area: ['800px', '520px'],
        content: prefix + '/edit/' + id // iframe的url
    });
}

function remove(id) {
    layer.confirm('确定要删除选中的记录？', {
        btn: ['确定', '取消']
    }, function () {
        $.ajax({
            url: prefix + "/remove",
            type: "post",
            data: {
                'id': id
            },
            success: function (r) {
                if (r.code == 0) {
                    layer.msg(r.msg);
                    reLoad();
                } else {
                    layer.msg(r.msg);
                }
            }
        });
    })
}

function resetPwd(id) {
}

function batchRemove() {
    var rows = $('#exampleTable').bootstrapTable('getSelections'); // 返回所有选择的行，当没有选择的记录时，返回一个空数组
    if (rows.length == 0) {
        layer.msg("请选择要删除的数据");
        return;
    }
    layer.confirm("确认要删除选中的'" + rows.length + "'条数据吗?", {
        btn: ['确定', '取消']
        // 按钮
    }, function () {
        var ids = new Array();
        // 遍历所有选择的行数据，取每条数据对应的ID
        $.each(rows, function (i, row) {
            ids[i] = row['id'];
        });
        $.ajax({
            type: 'POST',
            data: {
                "ids": ids
            },
            url: prefix + '/batchRemove',
            success: function (r) {
                if (r.code == 0) {
                    layer.msg(r.msg);
                    reLoad();
                } else {
                    layer.msg(r.msg);
                }
            }
        });
    }, function () {

    });
}